import React from 'react';
import {Image, Linking, Modal, StatusBar, StyleSheet, Text, TouchableOpacity, View,} from 'react-native';
import Constants from '../utils/Constants';
import screen from '../utils/screen';
import DialogTip from '../widgets/modal/DialogTip';
import {AppInfo} from '../utils/common';
import Images from '../images/Images';
import {LGBtn} from '../widgets/buttons';

const help_avatar = require('../images/help_avart.png')
export default  class ServiceDialog extends React.Component {

    constructor(props) {
        super(props);


    }

    state={
        modalVisible:false
    }


    componentDidMount = () => {

    }



    logout = ()=>{
        this.hideDialog()
        this.onConfirm && this.onConfirm();

    }



    hideDialog = () => {

        this.setState({ modalVisible: false });
    }

    show = (onConfirm)=>{
        this.onConfirm = onConfirm
        this.setState({
            modalVisible:true
        })
    }

    onBtnClick = (type)=>{
        let str = ''
        const userId = AppInfo.helpdata.userId ?? ''
        if(global.token){
            str = Constants.home.welcome_1 + Constants.appname + Constants.home.welcome_2 + userId + '.'
        }else {
            str = Constants.home.welcome_1 + Constants.appname + '.'
        }
        if(type === 'whatsapp'){
            let url = 'https://zalo.me/' + AppInfo.helpdata.whatsapp
            Linking.openURL(url + "?text=" + encodeURIComponent(str));

        }else if(type === 'telegram'){
            let url =  AppInfo.helpdata.telegram
            Linking.openURL(url );
        }

    }

    renderContent(){

        let avatar,name
        if(AppInfo.helpdata){
            avatar = AppInfo.helpdata.avatar
            name = AppInfo.helpdata.name
        }


        return (
            <View style={styles.innerContainer}>

                <View style={{width:screen.PIXEL_160,height:screen.PIXEL_160,borderRadius: screen.PIXEL_80,
                    borderWidth:screen.PIXEL_10,borderColor:'#377C74',justifyContent:'center',alignItems:'center'
                }}>
                    {avatar && (
                        <Image source={help_avatar} style={{width:screen.PIXEL_160,height:screen.PIXEL_160}}/>
                    )}
                </View>

                <Text style={{color:'#377C74',fontSize:16,marginTop: screen.PIXEL_20}}>{name}</Text>

                <View style={styles.contentBg}>
                    <Text style={{fontSize:13,color:'#8A8A8A'}}>{Constants.home.welcome_3}</Text>
                </View>

                <View style={{flexDirection:'row',width:'100%',justifyContent:'center'}}>
                    <LGBtn
                        title={'Zalo'}
                        style={{flex:1,height:screen.PIXEL_80}}
                        onPress={()=>this.onBtnClick('whatsapp')}
                    />
                    <View style={{width:screen.PIXEL_40}}/>

                    <LGBtn
                        title={'Telegram'}
                        style={{flex:1,height:screen.PIXEL_80}}
                        onPress={()=>this.onBtnClick('telegram')}
                    />
                </View>




            </View>

        )
    }



    render() {




        return (
            <Modal
                animationType={'none'}
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={() => { this.hideDialog() }}
                onShow={this.startShow}
            >
                <StatusBar barStyle='light-content' translucent={true} backgroundColor="rgba(16, 17, 22,0.75)" animated={false} />
                <TouchableOpacity
                    activeOpacity={1.0}
                    onPress={() => {

                    }}
                    style={styles.bottomcontainer}>

                    <View style={styles.container}>

                        {this.renderContent()}

                        <TouchableOpacity
                            style={{marginTop:screen.PIXEL_40}}
                            onPress={()=>{
                                this.hideDialog()
                            }}
                        >
                            <Image source={Images.close}
                                   style={{width:screen.PIXEL_70,height:screen.PIXEL_70}}/>
                        </TouchableOpacity>

                    </View>
                    <DialogTip ref={ref=>{this.tipDialog = ref}} />
                </TouchableOpacity>
            </Modal>
        );
    }


    startShow = () => {

    }
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    innerContainer: {
        width: screen.width - screen.PIXEL_100,
        padding:screen.PIXEL_40,
        backgroundColor: '#FFFFFF',
        justifyContent:'center',
        alignItems: 'center',
        borderRadius: screen.PIXEL_50
    },

    close:{
        width:screen.PIXEL_70,
        height:screen.PIXEL_70
    },
    bottomcontainer: {
        zIndex: 2,
        flex: 1,
        alignItems: 'center',
        backgroundColor: 'rgba(16, 17, 22,0.75)',
        justifyContent: 'flex-end',
    },
    contentBg:{
        padding: screen.PIXEL_40,width:'100%', alignItems:'center'
    }


});



